<template>
  <div class="chanye">
    <div class="chanye-title">
      <div class="title-img">
        外企
      </div>
      <div class="title-img">
        中国企业
      </div>
      <div class="title-img">
        竞争强度
      </div>
    </div>
    <div class="chanye-content" ref="parent">
      <div class="chanye-cItem" 
        v-for="item in dataList" 
        @mouseenter="enter(item)" 
        @mouseleave="leave"
      >
        <div class="chanye-cItem-li">
          {{item[0]}}
        </div>
        <div class="chanye-cItem-li">
          {{item[1]}}
        </div>
        <div class="chanye-cItem-li">
          {{Number(item[2]).toFixed(6)}}
        </div>
        <!-- pop -->
        <div class="chanye-tankuang" v-if="showItem">
          <p> 外企名称：</p>
          <div class="chanye-tankuang-text"> {{dataItem[0]}} </div>
          <p> 中国企业名称：</p>
          <div class="chanye-tankuang-text"> {{dataItem[1]}} </div>
          <p> 竞争强度：</p>
          <div class="chanye-tankuang-text"> {{dataItem[2]}} </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
  data () {
    return {
      timer: null,
      dataItem: {},
      showItem: false
    }
  },
  props: {
    dataList: {
      type: [Object, Array],
      required: true
    },
  },
  mounted() {
    this.getList42()
  },
  methods: {
    getList42(){

      this.rolling(200)
    },
    rolling(ntime){
      const parent= this.$refs.parent
      this.timer = setInterval(()=>{
        if(parent.scrollTop + parent.clientHeight >= parent.scrollHeight ){
          parent.scrollTop = 0;
        }else{
          parent.scrollTop += 2;
        }
      },ntime)
    },
    enter(item){
      
      if (this.timer) {
        this.dataItem = item
        this.showItem = true
        clearInterval(this.timer);
        this.initInterval = null;
      }
    },
    leave(){
      this.showItem = false
      if (this.initInterval) {
        
        return 
      }
      this.rolling(200)
    },
  }
}
</script>
<style lang="stylus" scoped>
  .chanye{
    font-family: SourceHanSansCN-Regular !important;
    padding-top: 26px;
    width 389px;
    position relative;
    margin-bottom: 20px;
    .chanye-title{
      width 100%;
      height 24px;
      display flex;
      justify-content space-between;
      .title-img{
        width 124px;
        height 23px;
        background: url(../../../../../public/images/jinghe/right/titlebg.png) no-repeat;
        background-size: 124px 23px;
        font-size 17px;
        font-family Source Han Sans CN;
        font-weight 400;
        line-height 23px;
        color #FFFFFF;
        text-align center;
      }
    }
    .chanye-content{
      width 100%;
      height 205px;
      margin 15px 0;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
      .chanye-cItem{
        width 100%;
        height 28px;
        // margin-bottom 8px;
        padding-bottom 8px;
        display flex;
        justify-content space-between;
        cursor pointer;
        .chanye-cItem-li{
          padding: 0 6px;
          text-align center;
          // width 105px;
          width : 122px;
          box-sizing: border-box;
          height 100%;
          font-size: 17px;
          font-family Source Han Sans CN;
          font-weight bold;
          line-height 28px;
          color #00DCFF;
          &:nth-child(1),&:nth-child(2){
            color #FFFFFF;
            font-size 16px;
            font-weight 400;
            overflow hidden;
            word-wrap break-word;
            text-overflow ellipsis;
            white-space nowrap;
            background #32538E;
          }
        }
      }
    }
    .chanye-content::-webkit-scrollbar {
      display: none;
    }
    .chanye-tankuang{
      position absolute;
      width 140px;
      height 180px;
      padding 13px 10px;
      background rgba(3,16,38,1);
      top 38px;
      left -180px;
      z-index 9999;
      p{
        font-size 15px;
        font-family Source Han Sans CN;
        font-weight bold;
        color #04CDF4;
        margin 0 0 3px 0;
        padding 0;
      }
      .chanye-tankuang-text{
        font-size 15px;
        font-family Source Han Sans CN;
        font-weight 400;
        color #E0EDF9;
        margin-bottom 5px;
      }
    }
  }
</style>